<template>
<div>
   <el-table border :data="skuInfoList">
     <el-table-column label="序号" type="index" align="center" width="80"></el-table-column>
     <el-table-column prop="skuName" label="名称"></el-table-column>
     <el-table-column prop="skuDesc" label="描述"></el-table-column>
     <el-table-column label="默认照片" align="center">
       <template slot-scope="{row}">
          <img :src="row.skuDefaultImg" style="width:100px" >
       </template>
     </el-table-column>
     <el-table-column prop="weight" label="重量(KG)" width="80"></el-table-column>
     <el-table-column prop="price" label="价格(元)" width="80"></el-table-column>
     <el-table-column label="操作" align="center" width="300">
       <template slot-scope="{row}">
           <el-button @click="cancelsale(row)" size="mini" icon="el-icon-bottom" type="info" v-if="row.isSale==1"></el-button>
           <el-button @click="onsale(row)" size="mini" icon="el-icon-top" type="success" v-else></el-button>
           <el-button @click="edit" size="mini" icon="el-icon-edit" type="primary" ></el-button>
           <el-button @click="getskuInfo(row)" size="mini" icon="el-icon-info" type="info" style="margin-right:10px"></el-button>
           <el-drawer :visible.sync="show" :show-close="false" size="50%">
            <el-row>
            <el-col :span="6">名称</el-col>
            <el-col :span="18">{{skuone.skuName}}</el-col>
            <el-col :span="6">描述</el-col>
            <el-col :span="18">{{skuone.skuDesc}}</el-col>
            <el-col :span="6">价格</el-col>
            <el-col :span="18">{{skuone.price}}</el-col>
            </el-row>
            <el-row>
            <el-col :span="6">平台属性</el-col>
            <el-col :span="18">
            <template >
               <el-tag v-for="tag in skuone.skuAttrValueList" style="margin:5px"
               :key="tag.id" closable type="success"> {{tag.attrName}}</el-tag>
            
            </template>
           </el-col>
            </el-row>
            <el-row>
            <el-col :span="6">商品图片</el-col>
            <template>
             <el-carousel :interval="5000" arrow="always">
               <el-carousel-item v-for="img in skuone.skuImageList" :key="img.id" >
                 <img :src="img.imgUrl" >
               </el-carousel-item>
             </el-carousel>
           </template>
            </el-row>
          </el-drawer>
           <el-button @click="deletesku(row)" size="mini" icon="el-icon-delete" type="danger"></el-button>
       </template> 
     </el-table-column>
    </el-table>
       <!-- 分页器 -->
      <el-pagination
      style="text-align:center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[2, 3, 4]"
      :page-size="limit"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total">
    </el-pagination>
</div>
</template>

<script>
export default {
  name: "sku_",
  data(){
    return{
      skuInfoList:[],
      skuone:{},
      total:null,
      page:2,
      limit:8,
      show:false
    }
  },
  mounted(){
   this.getSkuList()
  },
  methods:{
   async getSkuList(){
     let result =await this.$API.sku.reqSkuInfoList(this.page,this.limit)
     if(result.code===200){
      this.skuInfoList=result.data.records
      this.total=result.data.total
     }
    },
    //分页器
     handleSizeChange(limit) {
       this.limit=limit
       this.getSkuList()
      },
      handleCurrentChange(page) {
        this.page=page
        this.getSkuList()
      },
      //sku下架
     async cancelsale(row){
       row.isSale=0
      //  let result=await this.$API.sku.reqskucancelSale(row.id)
        this.$message({type:'success',message:'下架成功！'})
        // this.getSkuList()
  
      },
      //sku上架
      async onsale(row){
       row.isSale=1
      //  let result=await this.$API.sku.reqskuonSale(row.id)
      //  if(result.code==200){
        this.$message({type:'success',message:'上架成功！'})
        // this.getSkuList()
      //  }
      },
      //sku编辑
      edit(){
      this.$message({type:"info",message:'正在开发中... '})
      },
     async getskuInfo(row){
      this.show = true
      let result=await this.$API.sku.reqskuByid(row.id)
      if(result.code==200){
        this.skuone=result.data
      }
      },
      //删除sku
     async deletesku(row){
     let result=await this.$API.sku.reqDeleteskuById(row.id)
     if(result.code===200){
     this.$message({type:'success',message:'删除成功！'})
     this.getSkuList()
     }
     }
  }

};
</script>

<style>
.el-col{
  margin: 5px 0;
}
.el-row .el-col-6{
    font-size: 18px;
    text-align: right;
    font-weight: 700;
}
.el-row .el-col-18{
    padding-left:20px;
    text-align: left;
}
 .el-carousel__item{
   border: 1px solid rgb(184, 184, 184);
   margin-left:20px;
   width: 400px;
 }
 .el-carousel__item img {
    font-size: 18px;
    line-height: 200px;
    height:100%;
    width:100%;
    
  }
  
.el-carousel__button{
  width: 20px;
  height: 20px;
  background-color:rgb(216, 63, 157);
  border-radius: 50%;
}
</style>